<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body></body>
  <script>
    // 原始数据
    const data = { text: "hello world" };
    // 存储副作用函数的 桶
    const bucket = new Set();
    // 存储副作用函数的变量
    let activeEffect;
    // 注册副作用函数的函数
    const effect = (fn) => {
      activeEffect = fn;
      fn();
    };
    const obj = new Proxy(data, {
      get(targe, key) {
        if (activeEffect) {
          bucket.add(activeEffect);
        }
        return targe[key];
      },
      set(target, key, newVal) {
        target[key] = newVal;
        // 执行副作用函数桶
        bucket.forEach((fn) => {
          fn();
        });
        // 设置的时候 return 可以不用写，读取就一定要写
        return true;
      },
    });
    // 注册副作用函数
    effect(() => {
      console.log("注册副作用函数");
      document.body.innerHTML = obj.text;
    });

    setTimeout(() => {
      obj.text = "test";
    }, 1000);

    // 不存在的属性也触发了响应式
    setTimeout(() => {
      obj.noExit = "test";
    }, 3000);
  </script>
</html>
